<template>
    <div class="Login">
        <a-row>
            <a-col :sm="col.xs" :offset="col.offset">
            <a-divider>用户登录</a-divider>
                <a-form :model="user" :rules="rules" @submit.prevent="login">
                    <a-form-item hasFeedback name="account">
                        <a-input
                        placeholder="请输入邮箱账号"
                        autocomplete="off" 
                        v-model:value="user.account" 
                        type="email" />
                    </a-form-item>
                    <a-form-item name="password">
                        <a-input-password
                            placeholder="请输入登录密码"
                            autocomplete="off"
                            v-model:value.trim="user.password"
                            type="password"
                        />
                    </a-form-item>
                    <a-form-item style="margin-top: 20px;">
                        <a-button html-type="submit" block size="large" type="primary">登录</a-button>
                    </a-form-item>
                </a-form>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import { warning,success } from "@/antd";
import { account,password } from "/src/antd/index.js";
import pub from '/src/lib/index.js'
export default {
    name:'Login',
    data() {
        return {
            col:{
                xs:8,
                offset:8
            },
            user: {
                account: "",
                password: "",
            },
        }
    },
    methods:{
        login() {
            this.$store.dispatch('asyncLogin',this.user)
            .then(()=>{
                success("登录成功")
                this.$router.push('/personal')
            })
            .catch((error)=>{
                warning(error)
            })
        }
    },
    mounted() {
        window.addEventListener('resize',this.$_.debounce(()=>{
            this.col = pub.windowReSize(this.col)
        },50))
    },
    computed: {
        rules: function () {
            return {
                account,password
            }
        },
    },
}
</script>

<style scoped>

</style>
